<template>
  <div class="container">
    <div class="center-top">
      <img :src="userinfo.pic" class="center-thumb" />
      <div class="center-top-content">
        <span class="fz32">{{userinfo.stname}}</span>
        <span class="fz24">身份证：{{userinfo.idcard}}</span>
      </div>
      <div class="look-more" @click="lookMore">更多资料</div>
    </div>

    <router-link :to="{path:'/studyNotice',query: {type: 'notice'}}">
    <div class="center-item">
      <van-icon name="volume-o" size="22" />
      <span class="center-item-text">学习公告</span>
      <van-icon name="arrow" />
    </div>
    </router-link>
    <router-link  :to="{path:'/studyNotice',query: {type: 'task'}}">
    <div class="center-item">
      <van-icon name="orders-o" size="22" />
      <span class="center-item-text">作业公告</span>
      <van-icon name="arrow" />
    </div>
    </router-link>
    <router-link  :to="{path:'/studyNotice',query: {type: 'msg'}}">
    <div class="center-item">
      <van-icon name="comment-o" size="22" />
      <span class="center-item-text">我的消息</span>
      <van-icon name="arrow" />
    </div>
    </router-link>
    <!--<div class="center-item">-->
      <!--<span>#</span>-->
      <!--<span class="center-item-text">使用帮助</span>-->
      <!--<van-icon name="arrow" />-->
    <!--</div>-->
    <router-link  :to="{path:'/about'}">
    <div class="center-item">
      <van-icon name="contact" size="22" />
      <span class="center-item-text">关于我们</span>
      <van-icon name="arrow" />
    </div>
    </router-link>
    <Footer></Footer>
  </div>
</template>

<script>
  import util from '@/common/util';
  export default {
    data() {
      return {
        baseURL: '',
        userinfo:{},
      }
    },
    created() {
      if(util.storage.get('userinfo')){
        this.userinfo = util.storage.get('userinfo');
      }
      this.baseURL = util.baseURL;
    },
    methods: {
      lookMore() {
        let that = this;
        that.$router.push({path:'/editorInfo'})
      }
    }
  }
</script>

<style scoped>

  .center-top-content {
    height: 1.08rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 10px;
  }
  .look-more {
    width: 1.7rem;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    font-size: .28rem;
    color: #fff;
    background-color: #67a0f5;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
  }
  .center-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem 12px;
    margin-bottom: 1px;
    font-size: .32rem;
    background-color: #fff;
  }
</style>
